/**
 * [商品配置]
 */
<template>
    <div>
        <el-table :data="shopData" border class="shop_set" v-loading="loading">
            <el-table-column prop="id" label="ID" :show-overflow-tooltip="true" width="60"></el-table-column>
            <el-table-column prop="name" label="图标" :show-overflow-tooltip="true" width="80">
                <template slot-scope="scope">
                    <div class="userHead" @click="onPictureClick(scope.row, scope.$index)">
                        <el-upload 
                            :show-file-list="false" 
                            :action="baseUrl + '/api/console/system/upload'"
                            :headers="{authorizedkey:authorized_key}"
                            :on-success="goodsPictureUpload"
                            :data="{
                                bid: createBid()
                            }"
                            title="添加图片"
                        >
                            <img :src="scope.row.prize_cover" class="square" />
                        </el-upload>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="奖品名称" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.lottery_name"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="类型">
                <template slot-scope="scope">
                    <div class="disbox" style="white-space:nowrap;">
                        <el-select v-model="scope.row.type" placeholder="请选择" style="width:47.5%;margin-right:5%;">
                            <el-option label="实物" :value="1"></el-option>
                            <el-option label="现金" :value="2"></el-option>
                            <el-option label="积分" :value="3"></el-option>
                        </el-select>
                    <!--当类型 为现金和积分的时候显示这个输入框，其它的情况不显示。-->
                        <el-input v-if="scope.row.type != 1" v-model="scope.row.num" placeholder="金额" style="width:47.5%;"></el-input>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="ratio" label="中奖概率%" :show-overflow-tooltip="true" width="100">
                <template slot-scope="scope">
                    <el-input width="60" v-model="scope.row.ratio"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="lottery_number" label="累计中奖次数" :show-overflow-tooltip="true" width="120"></el-table-column>
            <el-table-column prop="param_tpl" label="所需资料">
                <template slot-scope="scope">
                    <div class="infoInput" style="white-space:nowrap;margin-top:7px;">
                        <ul class="collect-info">
                            <li :key="index" v-for="(item,index) in scope.row.param_tpl"><span @click="updateParam(scope.row.param_tpl, scope.$index, index)">{{item.title}}</span><i @click="delParam(scope.row, index)" class="el-icon-close"></i></li>
                        </ul>
                        <a class="addCollectBtn blue" @click="addParam(scope.$index)">添加</a>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-button @click="saveSubmit" :loading="submitLoading" type="primary">立即保存</el-button>

        <el-dialog
			title="提示"
			:visible.sync="dialogVisible"
			width="600px">
			<el-form label-position="top" label-width="80px">
				<el-form-item label="名称">
					<el-input v-model="tempGoods.title"></el-input>
				</el-form-item>
				<el-form-item label="placeholder">
					<el-input v-model="tempGoods.placeholder"></el-input>
				</el-form-item>
				<el-form-item label="name">
					<el-input v-model="tempGoods.name"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button v-if="dialogType == 0" type="primary" @click="addParamSubmit">确 定</el-button>
				<el-button v-else type="primary" @click="updateParamSubmit">确 定</el-button>
			</span>
		</el-dialog>
    </div>
</template>
<script>
import fetch from '@/api/axios';
import utils from '@/utils/index';
import env from '@/config/env';
export default {
    data(){
        return {
            authorized_key:  utils.handleLocalStorage.get('authorized_key'),
			baseUrl: env.baseUrl,
            bid: '',
            loading: false,
			dialogVisible: false,
			submitLoading: false,
            shopData: [],
			goodsIndex: 0,
			paramIndex: 0,
			tempGoods: {
				placeholder: '',
				name: '',
				value: '',
				title: ''
			},
			dialogType: 0,
        }
    },
    created(){
        this.getGoods();
    },
    methods:{
        getGoods(){
			fetch.get('/api/console/lottery/prize').then(res=>{
				let data = res.data;
				if(data.code == 0){
					this.shopData = data.data.list;
				}else{
					this.$message.error(data.message);
				}
			}).catch(err=>{
				this.$message.error(err);
			});
        },
        createBid() {
            let prefix = utils.createUploadPrefix('Task');
            let bid = prefix + '-' +  utils.createBidFn();
            this.bid = bid;
            return  bid;
        },
        onPictureClick(item, index){
            this.goodsIndex = index;
        },
        goodsPictureUpload(res){
            let img = res.data.url;
            this.$set(this.shopData[this.goodsIndex], 'prize_cover', img);
            this.goodsIndex = 0;
        },
		updateGoods(item){
			this.$router.push({name: 'goodsDetail', params: {detail: item}});
		},
		delParam(item, index){
			item.param_tpl.splice(index, 1);
		},
		addParam(index){
			this.resetTempGoods();
			this.dialogVisible = true;
			this.goodsIndex = index;
			this.dialogType = 0;
		},
		addParamSubmit(){
			this.shopData[this.goodsIndex].param_tpl.push({...this.tempGoods});
			this.dialogVisible = false;
			this.resetTempGoods();
		},
		updateParam(param, goodsIndex, paramIndex){
			this.dialogType = 1;
			this.tempGoods = {...param[paramIndex]};
			this.dialogVisible = true;
			this.goodsIndex = goodsIndex;
			this.paramIndex = paramIndex;
        },
		updateParamSubmit(){
			let param_tpl = this.shopData[this.goodsIndex].param_tpl;
			param_tpl[this.paramIndex] = {...this.tempGoods};
			this.$set(this.shopData[this.goodsIndex], 'param_tpl', [...param_tpl]);
			this.dialogVisible = false;
			this.resetTempGoods();
		},
		resetTempGoods(){
			this.tempGoods = {
				placeholder: '',
				name: '',
				value: '',
				title: ''
			};
			this.goodsIndex = 0;
			this.paramIndex = 0;
		},
		saveSubmit(){
			this.submitLoading = true;
			fetch.post('/api/console/lottery/prize', this.shopData, {
				headers: "Content-Type=application/json;charset=UTF-8"
			}).then(res=>{
                let data = res.data;
                if(data.code == 0){
                    this.$message.success(data.message);
                }else{
                    this.$message.error(data.message);
                }
			}).catch(err=>{
				this.$message.error('网络连接失败，请稍后重试');
			}).finally(()=>{
				this.submitLoading = false;
			});
		}
    },
}
</script>
<style lang="scss" scoped>
.shop_set{
	margin-top:20px;
	margin-bottom:40px;
}
.blue,.gray{
	cursor: pointer;
}
.addShop{
	cursor: pointer;
	font-size: 14px;
	margin-left: 22px;
	color: #b6b6b6;
}
.infoInput{
	overflow: auto;
	._inDiv{
		display: inline-block;
		margin-right:15px;
		position:relative;
		.closes{
			width: 17px;
			height: 17px;
			position: absolute;
			right: -8px;
			top: 0;
			z-index: 1;
			cursor: pointer;
		}
		._input{
			width:70px;
		}
	}
	&::-webkit-scrollbar {
		width : 10px;
		height: 5px;
	}
	&::-webkit-scrollbar-thumb {
		border-radius: 10px;
		box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.1);
		background   : #ccc;
	}
	&::-webkit-scrollbar-track {
		box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		background   : #F9F9F9;
	}
}
</style>
<style lang="scss">
.luck_rules .w-e-toolbar{
	.w-e-menu {
		padding: 12px 10px;
		i{
			font-size:14px;
		}
	}
}
.collect-info{
	li{
		padding: 2px 2px 2px 5px;
		position: relative;
		border: 1px solid #f1f1f1;
		background: #FFF;
		float: left;
		cursor: pointer;
		margin-right: 10px;
		margin-bottom: 10px;
		border-radius: 5px;
		i{
			padding: 2px;
			margin-left: 5px;
		}
	}
	
}
a.addCollectBtn{
	padding: 2px;
	display: inline-block;
}
.form-label{
	padding-bottom: 10px;
	margin-top: 20px;
}
</style>
